<template>
	<view class="item-info" :style="padding"  :data-id="item.id"  :data-industryId="item.industry_id==6"  @click="navUrl" >
		<image :src="item.shop_image+'?x-oss-process=image/resize,m_fill,h_160,w_200'" mode="" lazy-load class="shop-image"></image>
		<view class="info" :style="item.tags.length>0?'':'justify-content: space-between'">
			<view class="name">
				{{item.name}}
			</view>
			<view class="address">
				<view class="">
					<tui-icon :name="'gps'" :size="'13'" :color="'#333333'"></tui-icon>
					<text class="text-cut">{{item.address}}</text>
				</view>
				<view class="text-cut">
					{{item.distance}}
				</view>
			</view>
			<view class="tags" v-if="item.tags.length>0">
				<uni-tag v-for="(tag,index) in item.tags" :key="index" inverted="true" :text="tag" size="small" :type="colorList[index]"></uni-tag>
			</view>

			<view class="desc  text-cut" v-if="item.summary">
				{{item.summary}}
			</view>
		</view>
	</view>
</template>

<script>
	import uniTag from "../component/uni-tag.vue";
	import tuiIcon from "@/components/thorUI/icon.vue";
	export default {
		components: {
			uniTag,
			tuiIcon
		},
		data() {
			return {
				colorList: ['success', 'primary', 'warning', 'error'],
			}
		},
		props: {
			item: {
				type: Object,
				default: null
			},
			padding: {
				type: String,
				default: null
			}
		},
		created() {},
		methods: {
			navUrl(e) {
				var isIndusty = e.currentTarget.dataset.industryid
				var id = e.currentTarget.dataset.id
				if (isIndusty) {
					uni.navigateTo({
						url: '/pages/scenicDetail?busId=' + id
					})
				} else {
					uni.navigateTo({
						url: '/pages/generalDetail?busId=' + id
					})
				}
			},
		}
	}
</script>

<style>
	.tags .uni-tag{
		margin-right: 10rpx;
	}
</style>
<style>
	.item-info {
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding: 24upx 0;
		border-bottom: solid 1upx #f2f2f2;
		background: #fff;
	}

	.shop-image {
		width: 200upx;
		height: 160upx;
		margin-right: 24upx;
		border-radius: 8upx;
	}

	.info {
		flex: 1;
		display: flex;
		flex-direction: column;
		max-width: 480rpx;
	}

	.name {
		font-size: 30upx;
		color: #333333;
		letter-spacing: 1upx;
		font-weight: bold;
	}

	.tags {
		display: flex;
	}

	.tags uni-tag {
		margin-right: 10rpx;
	}

	.remain {
		display: flex;
		margin-top: 20upx;
		/* justify-content: space-between; */
		align-items: center;
		width: 100%;
	}

	.remain>view:nth-child(1) {
		height: 36upx;
		background-color: #ffffff;
		border-radius: 8upx;
		border: solid 1upx #f8990b;
		text-align: center;
		line-height: 36upx;
		color: #f8990b;
		font-size: 24upx;
		padding: 0 10upx;
		margin-right: 45upx;
	}

	.remain>view:nth-child(2) {
		display: flex;
		align-items: center;
	}

	.remain>view:nth-child(2) image {
		width: 28upx;
		height: 28upx;
		margin-right: 10upx;
		border-radius: 100%;
	}

	.remain>view:nth-child(2) text {
		font-size: 24upx;
		color: #f71010;
	}

	.address {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 70rpx;
		align-items: center;
	}

	.address>view:nth-child(1) {
		flex: 1;
		display: flex;
		align-items: center;
		height: 70rpx;
	}
	
	.address>view:nth-child(1) text{
		color: #333333;
		font-size: 26rpx;
		margin-left: 10rpx;
		max-width: 300rpx;
	}

	.address>view:nth-child(2) {
		font-size: 26rpx;
		color: #333333;
	}
	
	.desc{
		font-size: 26rpx;
		color: #999999;
		margin-top: 20rpx;
	}
</style>
